<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=792421" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">热线电话</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">新闻</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">融资</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">注销</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe785;</span>
                <div class="name">招聘</div>
                <div class="code-name">&amp;#xe785;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">YY_password_2</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">企业</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">被执行人信息查询</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">法人身份证</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">受益人</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">报表</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">iphone</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">website</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">password</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">浏览</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">行政法务00</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">产品 (1)</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">分享按钮</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">android</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">财务数据</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">企业网银</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">附近客户</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">变更</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">企业商标</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">拍卖</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">我的投资</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">专利</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">tree-round-税务</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">工商登记</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">协助</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">车辆抵押登记</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">裁判文书</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">抽查检查</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">法院公告</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">公示处罚</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">公示许可</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">动产抵押</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">股东信息</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">股权出质</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">环保处罚</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">进出口信用</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">经营异常</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">开庭公告</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">税收违法</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">税务开票</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">招投标</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">注册网站</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">企业年报</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">工商失信</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">欠税公告</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">税务评级</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">打电话</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">下箭头</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">确认密码</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-rexiandianhua"></span>
            <div class="name">
              热线电话
            </div>
            <div class="code-name">.icon-rexiandianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconfontdizhi"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-iconfontdizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinwen"></span>
            <div class="name">
              新闻
            </div>
            <div class="code-name">.icon-xinwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rongzi"></span>
            <div class="name">
              融资
            </div>
            <div class="code-name">.icon-rongzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuojiantou"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-zuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconfontjiantou2"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-iconfontjiantou2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuxiaologout10"></span>
            <div class="name">
              注销
            </div>
            <div class="code-name">.icon-zhuxiaologout10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-msnui-job"></span>
            <div class="name">
              招聘
            </div>
            <div class="code-name">.icon-msnui-job
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yypassword2"></span>
            <div class="name">
              YY_password_2
            </div>
            <div class="code-name">.icon-yypassword2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiye"></span>
            <div class="name">
              企业
            </div>
            <div class="code-name">.icon-qiye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-beizhixingrenxinxichaxun"></span>
            <div class="name">
              被执行人信息查询
            </div>
            <div class="code-name">.icon-beizhixingrenxinxichaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-farenshenfenzheng"></span>
            <div class="name">
              法人身份证
            </div>
            <div class="code-name">.icon-farenshenfenzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouyiren"></span>
            <div class="name">
              受益人
            </div>
            <div class="code-name">.icon-shouyiren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baobiao"></span>
            <div class="name">
              报表
            </div>
            <div class="code-name">.icon-baobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iphone"></span>
            <div class="name">
              iphone
            </div>
            <div class="code-name">.icon-iphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-website"></span>
            <div class="name">
              website
            </div>
            <div class="code-name">.icon-website
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-password"></span>
            <div class="name">
              password
            </div>
            <div class="code-name">.icon-password
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liulan"></span>
            <div class="name">
              浏览
            </div>
            <div class="code-name">.icon-liulan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingzhengfawu"></span>
            <div class="name">
              行政法务00
            </div>
            <div class="code-name">.icon-xingzhengfawu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chanpin1"></span>
            <div class="name">
              产品 (1)
            </div>
            <div class="code-name">.icon-chanpin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxianganniu"></span>
            <div class="name">
              分享按钮
            </div>
            <div class="code-name">.icon-fenxianganniu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-android"></span>
            <div class="name">
              android
            </div>
            <div class="code-name">.icon-android
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus-share"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-plus-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caiwushuju"></span>
            <div class="name">
              财务数据
            </div>
            <div class="code-name">.icon-caiwushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-group53"></span>
            <div class="name">
              企业网银
            </div>
            <div class="code-name">.icon-group53
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fujinkehu"></span>
            <div class="name">
              附近客户
            </div>
            <div class="code-name">.icon-fujinkehu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alter"></span>
            <div class="name">
              变更
            </div>
            <div class="code-name">.icon-alter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiyeshangbiao"></span>
            <div class="name">
              企业商标
            </div>
            <div class="code-name">.icon-qiyeshangbiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paimai"></span>
            <div class="name">
              拍卖
            </div>
            <div class="code-name">.icon-paimai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wodetouzi"></span>
            <div class="name">
              我的投资
            </div>
            <div class="code-name">.icon-wodetouzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanli"></span>
            <div class="name">
              专利
            </div>
            <div class="code-name">.icon-zhuanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tree-round-tax"></span>
            <div class="name">
              tree-round-税务
            </div>
            <div class="code-name">.icon-tree-round-tax
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongshangdengji"></span>
            <div class="name">
              工商登记
            </div>
            <div class="code-name">.icon-gongshangdengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiezhu"></span>
            <div class="name">
              协助
            </div>
            <div class="code-name">.icon-xiezhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cheliangdiyadengji"></span>
            <div class="name">
              车辆抵押登记
            </div>
            <div class="code-name">.icon-cheliangdiyadengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caipanwenshu"></span>
            <div class="name">
              裁判文书
            </div>
            <div class="code-name">.icon-caipanwenshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chouchajiancha"></span>
            <div class="name">
              抽查检查
            </div>
            <div class="code-name">.icon-chouchajiancha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fayuangonggao"></span>
            <div class="name">
              法院公告
            </div>
            <div class="code-name">.icon-fayuangonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongshichufa"></span>
            <div class="name">
              公示处罚
            </div>
            <div class="code-name">.icon-gongshichufa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongshixuke"></span>
            <div class="name">
              公示许可
            </div>
            <div class="code-name">.icon-gongshixuke
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dongchandiya"></span>
            <div class="name">
              动产抵押
            </div>
            <div class="code-name">.icon-dongchandiya
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gudongxinxi"></span>
            <div class="name">
              股东信息
            </div>
            <div class="code-name">.icon-gudongxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guquanchuzhi"></span>
            <div class="name">
              股权出质
            </div>
            <div class="code-name">.icon-guquanchuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huanbaochufa"></span>
            <div class="name">
              环保处罚
            </div>
            <div class="code-name">.icon-huanbaochufa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinchukouxinyong"></span>
            <div class="name">
              进出口信用
            </div>
            <div class="code-name">.icon-jinchukouxinyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jingyingyichang"></span>
            <div class="name">
              经营异常
            </div>
            <div class="code-name">.icon-jingyingyichang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaitinggonggao"></span>
            <div class="name">
              开庭公告
            </div>
            <div class="code-name">.icon-kaitinggonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuishouweifa"></span>
            <div class="name">
              税收违法
            </div>
            <div class="code-name">.icon-shuishouweifa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuiwukaipiao"></span>
            <div class="name">
              税务开票
            </div>
            <div class="code-name">.icon-shuiwukaipiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhaotoubiao"></span>
            <div class="name">
              招投标
            </div>
            <div class="code-name">.icon-zhaotoubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhucewangzhan"></span>
            <div class="name">
              注册网站
            </div>
            <div class="code-name">.icon-zhucewangzhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiyenianbao"></span>
            <div class="name">
              企业年报
            </div>
            <div class="code-name">.icon-qiyenianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongshangshixin"></span>
            <div class="name">
              工商失信
            </div>
            <div class="code-name">.icon-gongshangshixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianshuigonggao"></span>
            <div class="name">
              欠税公告
            </div>
            <div class="code-name">.icon-qianshuigonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuiwupingji"></span>
            <div class="name">
              税务评级
            </div>
            <div class="code-name">.icon-shuiwupingji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangjiantou"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.icon-shangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dadianhua"></span>
            <div class="name">
              打电话
            </div>
            <div class="code-name">.icon-dadianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuo-"></span>
            <div class="name">
              下箭头
            </div>
            <div class="code-name">.icon-tubiaozhizuo-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ico"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-ico
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-querenmima"></span>
            <div class="name">
              确认密码
            </div>
            <div class="code-name">.icon-querenmima
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rexiandianhua"></use>
                </svg>
                <div class="name">热线电话</div>
                <div class="code-name">#icon-rexiandianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontdizhi"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-iconfontdizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinwen"></use>
                </svg>
                <div class="name">新闻</div>
                <div class="code-name">#icon-xinwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rongzi"></use>
                </svg>
                <div class="name">融资</div>
                <div class="code-name">#icon-rongzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-zuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontjiantou2"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-iconfontjiantou2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuxiaologout10"></use>
                </svg>
                <div class="name">注销</div>
                <div class="code-name">#icon-zhuxiaologout10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-msnui-job"></use>
                </svg>
                <div class="name">招聘</div>
                <div class="code-name">#icon-msnui-job</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yypassword2"></use>
                </svg>
                <div class="name">YY_password_2</div>
                <div class="code-name">#icon-yypassword2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiye"></use>
                </svg>
                <div class="name">企业</div>
                <div class="code-name">#icon-qiye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-beizhixingrenxinxichaxun"></use>
                </svg>
                <div class="name">被执行人信息查询</div>
                <div class="code-name">#icon-beizhixingrenxinxichaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-farenshenfenzheng"></use>
                </svg>
                <div class="name">法人身份证</div>
                <div class="code-name">#icon-farenshenfenzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouyiren"></use>
                </svg>
                <div class="name">受益人</div>
                <div class="code-name">#icon-shouyiren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baobiao"></use>
                </svg>
                <div class="name">报表</div>
                <div class="code-name">#icon-baobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iphone"></use>
                </svg>
                <div class="name">iphone</div>
                <div class="code-name">#icon-iphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-website"></use>
                </svg>
                <div class="name">website</div>
                <div class="code-name">#icon-website</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-password"></use>
                </svg>
                <div class="name">password</div>
                <div class="code-name">#icon-password</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liulan"></use>
                </svg>
                <div class="name">浏览</div>
                <div class="code-name">#icon-liulan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingzhengfawu"></use>
                </svg>
                <div class="name">行政法务00</div>
                <div class="code-name">#icon-xingzhengfawu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chanpin1"></use>
                </svg>
                <div class="name">产品 (1)</div>
                <div class="code-name">#icon-chanpin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxianganniu"></use>
                </svg>
                <div class="name">分享按钮</div>
                <div class="code-name">#icon-fenxianganniu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-android"></use>
                </svg>
                <div class="name">android</div>
                <div class="code-name">#icon-android</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus-share"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-plus-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caiwushuju"></use>
                </svg>
                <div class="name">财务数据</div>
                <div class="code-name">#icon-caiwushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-group53"></use>
                </svg>
                <div class="name">企业网银</div>
                <div class="code-name">#icon-group53</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fujinkehu"></use>
                </svg>
                <div class="name">附近客户</div>
                <div class="code-name">#icon-fujinkehu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alter"></use>
                </svg>
                <div class="name">变更</div>
                <div class="code-name">#icon-alter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyeshangbiao"></use>
                </svg>
                <div class="name">企业商标</div>
                <div class="code-name">#icon-qiyeshangbiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paimai"></use>
                </svg>
                <div class="name">拍卖</div>
                <div class="code-name">#icon-paimai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodetouzi"></use>
                </svg>
                <div class="name">我的投资</div>
                <div class="code-name">#icon-wodetouzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanli"></use>
                </svg>
                <div class="name">专利</div>
                <div class="code-name">#icon-zhuanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tree-round-tax"></use>
                </svg>
                <div class="name">tree-round-税务</div>
                <div class="code-name">#icon-tree-round-tax</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongshangdengji"></use>
                </svg>
                <div class="name">工商登记</div>
                <div class="code-name">#icon-gongshangdengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiezhu"></use>
                </svg>
                <div class="name">协助</div>
                <div class="code-name">#icon-xiezhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cheliangdiyadengji"></use>
                </svg>
                <div class="name">车辆抵押登记</div>
                <div class="code-name">#icon-cheliangdiyadengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caipanwenshu"></use>
                </svg>
                <div class="name">裁判文书</div>
                <div class="code-name">#icon-caipanwenshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chouchajiancha"></use>
                </svg>
                <div class="name">抽查检查</div>
                <div class="code-name">#icon-chouchajiancha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fayuangonggao"></use>
                </svg>
                <div class="name">法院公告</div>
                <div class="code-name">#icon-fayuangonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongshichufa"></use>
                </svg>
                <div class="name">公示处罚</div>
                <div class="code-name">#icon-gongshichufa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongshixuke"></use>
                </svg>
                <div class="name">公示许可</div>
                <div class="code-name">#icon-gongshixuke</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dongchandiya"></use>
                </svg>
                <div class="name">动产抵押</div>
                <div class="code-name">#icon-dongchandiya</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gudongxinxi"></use>
                </svg>
                <div class="name">股东信息</div>
                <div class="code-name">#icon-gudongxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guquanchuzhi"></use>
                </svg>
                <div class="name">股权出质</div>
                <div class="code-name">#icon-guquanchuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huanbaochufa"></use>
                </svg>
                <div class="name">环保处罚</div>
                <div class="code-name">#icon-huanbaochufa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinchukouxinyong"></use>
                </svg>
                <div class="name">进出口信用</div>
                <div class="code-name">#icon-jinchukouxinyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jingyingyichang"></use>
                </svg>
                <div class="name">经营异常</div>
                <div class="code-name">#icon-jingyingyichang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaitinggonggao"></use>
                </svg>
                <div class="name">开庭公告</div>
                <div class="code-name">#icon-kaitinggonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuishouweifa"></use>
                </svg>
                <div class="name">税收违法</div>
                <div class="code-name">#icon-shuishouweifa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuiwukaipiao"></use>
                </svg>
                <div class="name">税务开票</div>
                <div class="code-name">#icon-shuiwukaipiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhaotoubiao"></use>
                </svg>
                <div class="name">招投标</div>
                <div class="code-name">#icon-zhaotoubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhucewangzhan"></use>
                </svg>
                <div class="name">注册网站</div>
                <div class="code-name">#icon-zhucewangzhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyenianbao"></use>
                </svg>
                <div class="name">企业年报</div>
                <div class="code-name">#icon-qiyenianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongshangshixin"></use>
                </svg>
                <div class="name">工商失信</div>
                <div class="code-name">#icon-gongshangshixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianshuigonggao"></use>
                </svg>
                <div class="name">欠税公告</div>
                <div class="code-name">#icon-qianshuigonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuiwupingji"></use>
                </svg>
                <div class="name">税务评级</div>
                <div class="code-name">#icon-shuiwupingji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangjiantou"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#icon-shangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dadianhua"></use>
                </svg>
                <div class="name">打电话</div>
                <div class="code-name">#icon-dadianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuo-"></use>
                </svg>
                <div class="name">下箭头</div>
                <div class="code-name">#icon-tubiaozhizuo-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ico"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-ico</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-querenmima"></use>
                </svg>
                <div class="name">确认密码</div>
                <div class="code-name">#icon-querenmima</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
